{extend name="layout/layout" /}

{block name="content"}
<div class="layui-card">
    <div class="layui-card-header">
        <h3>价格监控</h3>
        <div class="layui-btn-group">
            <button class="layui-btn layui-btn-sm" id="add-monitor">添加监控</button>
            <button class="layui-btn layui-btn-sm layui-btn-normal" id="refresh-monitor">刷新</button>
        </div>
    </div>
    <div class="layui-card-body">
        <table class="layui-table" lay-data="{url:'/admin/price/getMonitorList', page:true, id:'monitor-table'}" lay-filter="monitor-table">
            <thead>
                <tr>
                    <th lay-data="{field:'id', width:80, sort: true}">ID</th>
                    <th lay-data="{field:'product_name', width:200}">产品名称</th>
                    <th lay-data="{field:'current_price', width:120, sort: true}">当前价格</th>
                    <th lay-data="{field:'target_price', width:120, sort: true}">目标价格</th>
                    <th lay-data="{field:'price_change', width:120, sort: true}">价格变化</th>
                    <th lay-data="{field:'monitor_type', width:100}">监控类型</th>
                    <th lay-data="{field:'status', width:100, templet:'#status-tpl'}">状态</th>
                    <th lay-data="{field:'create_time', width:160, sort: true}">创建时间</th>
                    <th lay-data="{field:'operate', width:180, toolbar:'#operate-tpl'}">操作</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<!-- 状态模板 -->
<script type="text/html" id="status-tpl">
    {{# if(d.status == 1){ }}
        <span class="layui-badge layui-bg-green">启用</span>
    {{# } else { }}
        <span class="layui-badge">禁用</span>
    {{# } }}
</script>

<!-- 操作模板 -->
<script type="text/html" id="operate-tpl">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="detail">详情</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>

<!-- 添加/编辑监控弹窗 -->
<div id="monitor-form" style="display: none; padding: 20px;">
    <form class="layui-form" lay-filter="monitor-form">
        <div class="layui-form-item">
            <label class="layui-form-label">产品</label>
            <div class="layui-input-block">
                <select name="product_id" lay-verify="required" lay-search>
                    <option value="">请选择产品</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">目标价格</label>
            <div class="layui-input-block">
                <input type="number" name="target_price" placeholder="请输入目标价格" autocomplete="off" class="layui-input" lay-verify="required|number">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">监控类型</label>
            <div class="layui-input-block">
                <select name="monitor_type" lay-verify="required">
                    <option value="">请选择监控类型</option>
                    <option value="1">价格上涨</option>
                    <option value="2">价格下跌</option>
                    <option value="3">价格变化</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|禁用" checked>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submit">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
{/block}

{block name="script"}
<script>
layui.use(['table', 'form', 'layer'], function(){
    var table = layui.table;
    var form = layui.form;
    var layer = layui.layer;
    
    // 监听工具条
    table.on('tool(monitor-table)', function(obj){
        var data = obj.data;
        if(obj.event === 'detail'){
            layer.msg('查看详情：' + data.id);
        } else if(obj.event === 'del'){
            layer.confirm('真的删除这个监控吗？', function(index){
                // 删除逻辑
                obj.del();
                layer.close(index);
            });
        } else if(obj.event === 'edit'){
            // 编辑逻辑
            layer.open({
                type: 1,
                title: '编辑监控',
                content: $('#monitor-form'),
                area: ['500px', '400px']
            });
        }
    });
    
    // 添加监控
    $('#add-monitor').on('click', function(){
        layer.open({
            type: 1,
            title: '添加监控',
            content: $('#monitor-form'),
            area: ['500px', '400px']
        });
    });
    
    // 刷新
    $('#refresh-monitor').on('click', function(){
        table.reload('monitor-table');
    });
    
    // 表单提交
    form.on('submit(submit)', function(data){
        // 提交逻辑
        layer.msg('保存成功');
        return false;
    });
});
</script>
{/block}